<template>
  <div>
    <el-card class="box-card">
      <div style="font-size: 20px;font-weight: 700;">{{villageName}}</div>
      <!-- 小区统计 -->
      <el-row :gutter="12" style="margin-top: 20px;">
        <el-col :span="6">
          <el-card shadow="hover" style="width: 266px;height: 110px;">
            <div style="width: 50px;float: left;">
              <el-button type="primary" icon="el-icon-user" circle style="margin-left: 1%;width: 50px;height: 50px;font-size: 20px;margin-top: 5px;"></el-button>
            </div>
            <div style="width: 100px;float: left;margin-left: 10px;">
              <div style="color: #929292;font-size: 14px;">住户总数量</div>
              <div style="font-size: 26px;font-weight: 700;margin-top: 5px;">{{houseHoid}}</div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover" style="width: 266px;height: 110px;">
            <div style="width: 50px;float: left;">
              <el-button type="primary" icon="el-icon-house" circle style="margin-left: 1%;width: 50px;height: 50px;font-size: 20px;margin-top: 5px;background: #7262FD;border: none;"></el-button>
            </div>
            <div style="width: 100px;float: left;margin-left: 10px;">
              <div style="color: #929292;font-size: 14px;">房屋总数量</div>
              <div style="font-size: 26px;font-weight: 700;margin-top: 5px;">{{floor}}</div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover" style="width: 266px;height: 110px;">
            <div style="width: 50px;float: left;">
              <el-button type="primary" icon="el-icon-truck" circle style="margin-left: 1%;width: 50px;height: 50px;font-size: 20px;margin-top: 5px;background: #FFAA00;border: none;"></el-button>
            </div>
            <div style="width: 100px;float: left;margin-left: 10px;">
              <div style="color: #929292;font-size: 14px;">车位总数量</div>
              <div style="font-size: 26px;font-weight: 700;margin-top: 5px;">15100</div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover" style="width: 266px;height: 110px;">
            <div style="width: 50px;float: left;">
              <el-button type="success" icon="el-icon-brush" circle style="margin-left: 1%;width: 50px;height: 50px;font-size: 20px;margin-top: 5px;"></el-button>
            </div>
            <div style="width: 100px;float: left;margin-left: 10px;">
              <div style="color: #929292;font-size: 14px;">设备总数量</div>
              <div style="font-size: 26px;font-weight: 700;margin-top: 5px;">15100</div>
            </div>
          </el-card>
        </el-col>
      </el-row>
      <!-- 报修趋势图 -->
      <el-row :gutter="12" style="margin-top: 20px;height: 450px;border: 1px solid #E9E9E9;">
        <el-col :span="24">
          <div id="main"></div>
        </el-col>
      </el-row>
      <el-row :gutter="12" style="margin-top: 20px;border: 1px solid #E9E9E9;">
        <el-col :span="24">
          <!-- 住户列表 -->
          <div class="content">
            <div style="width: 100%;height: 60px;overflow: hidden;margin-top: 10px;">
              <div style="width: 100%;height: 60px;line-height: 50px;font-size: 14px;margin-top: 10px;">
                <span style="margin-right: 10px;margin-left: 30px;">精准查询</span>
                <el-select v-model="type" style="width: 200px;" placeholder="请选择查询类型">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
                <el-input v-model="input" style="width: 250px;margin-left: 20px;" placeholder="请输入"></el-input>
                <el-button style="margin-left: 100px;height: 40px;" type="primary" @click="queryHouseHold">查询</el-button>
                <el-button style="margin-left: 20px;height: 40px;" @click="cleanHouseHold">重置</el-button>
              </div>
            </div>
            <div style="width: 95%;height: 500px;margin: 0 auto;margin-top: 20px;">
              <el-table
                ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
                style="width: 100%">
                <el-table-column
                  prop="id"
                  label="序号"
                  width="110">
                </el-table-column>
                <el-table-column
                  prop="hname"
                  label="姓名"
                  width="130">
                </el-table-column>
                <el-table-column
                  prop="householdType"
                  label="类型"
                  width="130">
                </el-table-column>
                <el-table-column
                  prop="start"
                  label="状态"
                  width="130">
                  <template slot-scope="scope">
                  <p style="color: red;">{{scope.row.start == 0?'审核中':(scope.row.start == 1?'已认证':'认证失败')}}</p>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="documentNumber"
                  label="证件号码"
                  width="240">
                </el-table-column>
                <el-table-column
                  prop="hphone"
                  label="手机号"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="house"
                  label="房间"
                  width="140">
                </el-table-column>
                <el-table-column
                  fixed="right"
                  label="操作"
                  width="130">
                  <template slot-scope="scope">
                    <el-button @click="examine(scope.row)" type="text" size="small">审核</el-button>
                    <el-button @click="dumpUpdate(scope.row)" type="text" size="small">编辑</el-button>
                    <el-button type="text" size="small" @click="delHouseHold(scope.row)">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage4"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="100"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
              </el-pagination>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'SmartPropertyVueWorkbench',

  data() {
    return {
      villageName: window.sessionStorage.getItem('villageName'),
      charsTable: [],
      type: '',
      input: '',
      options: [{
        value: 'name',
        label: '住户姓名'
      },{
        value: 'phone',
        label: '手机号码'
      }, {
        value: 'number',
        label: '证件号码'
      }],
      tableData: [],
      total: 0,
      currentPage4: 1,
      pageRequest: { // 分页请求参数
        pageNum: 1, // 当前页
        pageSize: 10 // 每页多少条数据
      },
      houseHoid: '',
      floor: '',
    }
  },

  mounted() {
    const chartDom = document.getElementById('main');
      const myChart = echarts.init(chartDom);
      let option;

      option = {
        title: {
          text: '近一周报修量趋势'
        },
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: 'line'
          }
        ]
      };

     myChart.setOption(option);
     this.queryHouseHold()
     this.countHouseHoid()
     this.countFloor()
  },

  methods: {
    countHouseHoid(){ // 住户总数量
      this.$axios.get('/memberCjq/household/countHouseHoid',{
        params: {
          villageId: window.sessionStorage.getItem('vid')
        }
      }).then(res => {
        if(res.status === 200){
          this.houseHoid = res.data.obj.countHouseHoid
        }
      })
    },
    countFloor(){ // 房屋总数量
      this.$axios.get('/memberCjq/floor/countFloor',{
        params: {
          cid: window.sessionStorage.getItem('vid')
        }
      }).then(res => {
        if(res.status === 200){
          this.floor = res.data.obj.countHouse
        }
      })
    },
    queryHouseHold(){ // 住户列表展示
      this.$axios.get('/memberCjq/household/queryHouseHold',{
        params: {
          householdType: '',
          start: '',
          villageId: window.sessionStorage.getItem('vid'),
          pageSize: this.pageRequest.pageSize,
          startTime:'',
          endTime: '',
          house:'',
          type: this.type,
          input: this.input,
          pageNum: this.pageRequest.pageNum
        }
      }).then(res => {
        if (res.status === 200){
          this.tableData = res.data.obj.content
          this.total = res.data.obj.total
        }
      })
    },
    dumpUpdate(obj){
      this.$router.push({path:'/householdUpdate', query: {examine: obj}})
    },
    examine(obj){
      this.$router.push({path:'/examine', query: {examine: obj}})
    },
    delHouseHold (obj) { // 删除住户信息
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.delete('/memberCjq/household/delHouseHold', {
          params: {
            id: obj.id
          }
        }).then(res => {
          if (res.data.flag) {
            this.insertLog('删除房屋信息')
            this.MyMessage('删除成功!', 'success')
            this.queryHouseHold()
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    cleanHouseHold(){
      this.type = ''
      this.input = ''
      this.queryHouseHold()
    },
    handleSizeChange(val) {
      this.pageRequest.pageSize = val
      console.log(`每页 ${val} 条`)
      this.queryHouseHold()
    },
    handleCurrentChange(val) {
      this.pageRequest.pageNum = val
      console.log(`当前页: ${val}`)
      this.queryHouseHold()
    }
  }
}
</script>

<style scoped>
.box-card{
  margin: 10px;
  font-family: '微软雅黑';
}
#main{
  width: 100%;
  height: 400px;
  margin-top: 20px;
}
.content_top{
  width: 100%;
  height: 250px;
  overflow: hidden;
  border: 1px solid #E9E9E9;
}
.content{
  width: 100%;
  height: 650px;
  margin-top: 20px;
}
</style>